@extends('layouts.front')

@section('content')
@push('styles')
<style>
input[type="text"] {
    -webkit-appearance: none;
}
textarea{
    -webkit-appearance: none;
}
[v-cloak]{
    display: none;
}
</style>
@endpush

<div class="place-order">
    <a href="{{ route('member.address', ['action' => 'select']) }}" v-cloak class="weui-cell weui-cell_access order-cell address-cell">
        <div class="weui-cell__bd">
            <p class="shr" >收货人：@{{ address.user }}   <span class="tel" >@{{ address.tel }}</span></p>
            <p class="address" ><i class="icon iconfont icon-address"></i> @{{ address.info }}</p>
        </div>
        <div class="weui-cell__ft"></div>        
    </a>

    <div class="po-pane">
        <div class="po-pane-h">
            <div class="po-pane-hl">
                <img src="{{ $product->shop->avatar }}" alt="" class="store-img">
                <span class="store-name">
                    {{ $product->shop->name }}
                </span>
            </div>
            <div class="po-pane-hr">
                <a class="calltel" href="tel:{{ $product->shop->tel }}">联系卖家</a>
            </div>
        </div>

        <div class="po-pane-b">
            <div class="prod-info">
                <div class="prod-img">
                    <img src="/{{ $product->cover_image }}" alt="" srcset="">
                </div>
                <div class="prod-detail">
                    {{ $product->name }}  {{ $product->info }}
                </div>
            </div>
            <div class="prod-qty boder-b">
                <div class="qty-label">
                    购买数量
                </div>
                <div class="qty-input">
                    <input class="weui-input" type="number" v-model="nend_qyt" placeholder="">
                </div>
                <div class="qty-unit">
                    {{ $product->unit }}
                </div>
            </div>
            <div class="prod-price">
                <div class="price-label">
                    货品价格
                </div>
                <div class="price-value">
                        {{ $product->price }}元 / {{ $product->unit }} <span class="price-limit">2000{{  $product->unit }}起批</span>
                </div>
            </div>
            <div class="prod-tips boder-b">
                以上价格不含运费，可能与最终成交金额有偏差，购买前请与供应商充分沟通了解详情。
                <a class="calltel" href="tel:{{ $product->sotre['tel'] }}">电话联系</a>
            </div>
            <div class="prod-message">
                <div class="message-label">
                    买家留言
                </div>
                <div class="meesage-box">
                    <textarea class="weui-textarea" placeholder="" v-model="message" rows="2"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="po-check-out" v-cloak>
        <div class="po-check-out-amount">
            @{{ amount }}元
        </div>
        <div @click="haddleCreateOrder" class="po-check-out-aciont">
            立即下单
        </div>
    </div>
</div>

@section('tabbar')
@endsection

@push('scripts')
<script>
var vm = new Vue({
    el:"#app",
    data() {
        return {
            address_id: @if($aid) {{ $aid }} @else 0 @endif,
            address: {
                user: '',
                tel: '',
                info: ''
            },
            product_id: {{ $product->id }},
            nend_qyt: 1,
            message: '',
            loading: null,
        }
    },
    created: function() {
        this.$nextTick(function(){
            window.addEventListener("popstate", function(e) {
                window.location.href = '/product/{{ $product->id }}.html';
            }, false); 
            var state = { 
                title: "title", 
                url: "#"
            }; 
            window.history.pushState(state, "title", "#");
        });

        this.loading = weui.loading('loading')
        this.address_id ? this.getAddress() : this.getAddressDefault();
    },
    methods: {
        // 获取默认地址
        getAddressDefault() {
            var self = this;
            $.ajax({
                type: 'get',
                url: '/address/default',
                dataType: 'json',
                success: function(res) {
                    self.loading.hide();
                    if (res.status === 'success') {
                        self.address.user = res.data.contact_name;
                        self.address.tel = res.data.contact_tel;
                        self.address.info = res.data.area + res.data.address;
                        self.address_id = res.data.id;
                    } else {
                        weui.alert('设置收货地址', function(){
                            window.location.href = "{{ route('member.address', ['action' => 'select']) }}";
                        });
                    }
                }
            })
        },
        // 获取指定地址
        getAddress() {
            var self = this;
            $.ajax({
                url: '/address/' + this.address_id,
                type: 'get',
                dataType: 'json',
                success: function(res) {
                    self.loading.hide();
                    if(res.status === 'success') {
                        self.address.user = res.data.contact_name
                        self.address.tel = res.data.contact_tel
                        self.address.info = res.data.area + res.data.address
                    } else {
                        window.location.href = '/shopping/checkOut';
                    }
                }
            })
        },
        // 创建订单
        haddleCreateOrder() {
            var self = this;
            $.ajax({
                url: '{{ route("order.create") }}',
                type: 'post',
                dataType: 'json',
                data:{
                    pid: self.product_id,
                    aid: self.address_id,
                    qty: self.nend_qyt,
                    message: self.message  
                },
                success: function(res) {
                    if (res.status === 'success') {
                        window.location.href = '/member/orderShow/' + res.data;
                    }  
                }
            })
        }
    },
    computed: {
        amount: function() {
            return (this.nend_qyt * {{ $product->price }}).toFixed(2)
        }
    }
})
</script>
@endpush
@endsection
